import React from 'react'
import { Button, Form, Input, Modal, message } from 'antd'
import { fetchPost } from '../../../utils/request'

const FormItem = Form.Item
const { TextArea } = Input

class EditConfig extends React.Component {
  constructor (props) {
    super(props)
    this.state = {
      visible: false,
      applicationName: props.applicationName,
      record: props.record || {}
    }
  }

  componentWillReceiveProps (props) {
    if (props.record) {
      this.setState({
        record: props.record
      })
    }
    let applicationName = props.applicationName
    if (applicationName && this.state.applicationName !== applicationName) {
      this.setState({
        applicationName
      })
    }
  }

  showModal () {
    this.setState({
      visible: true
    })
  }

  handleOk (e) {
    this.props.form.validateFields((err, values) => {
      if (!err) {
        let params = {}
        params.applicationName = this.state.applicationName ? this.state.applicationName : this.state.record.applicationName
        params.id = this.state.record.id
        params.key = values.key
        params.value = values.value
        params.comment = values.comment
        let url = Object.keys(this.state.record).length === 0 ? '/dbConfig/add' : '/dbConfig/modify'
        fetchPost(url, params).then(json => {
          if (json.code === 0) {
            message.success('Success')
            this.props.form.resetFields()
            this.props.onReload()
            // window.location.reload()
          } else {
            message.error(json.msg)
          }
        })
        this.setState({
          visible: false
        })
      }
    })
  }

  handleCancel (e) {
    this.props.form.resetFields()
    this.setState({
      visible: false
    })
  }



  render () {
    const { getFieldDecorator } = this.props.form
    const formItemLayout = {
      labelCol: { span: 6 },
      wrapperCol: { span: 14 }
    }
    return (
      <div>
        <div style={{ margin: 10 }}>
          <Button type='primary' icon='edit'
            onClick={() => this.showModal()}>{Object.keys(this.state.record).length === 0 ? 'Add Configuration' : 'Edit'}</Button>
        </div>
        <Modal
          title={Object.keys(this.state.record).length === 0 ? 'Add' : 'Edit'}
          visible={this.state.visible}
          onOk={(e) => this.handleOk(e)}
          onCancel={(e) => this.handleCancel(e)}
        >
          <Form>
            <FormItem {...formItemLayout} label='key' hasFeedback>
              {getFieldDecorator('key', {
                rules: [{
                  required: true, message: 'Please input key'
                }],
                initialValue: this.state.record.key
              })(
                <Input />
              )}
            </FormItem>
            <FormItem {...formItemLayout} label='value' hasFeedback>
              {getFieldDecorator('value', {
                rules: [{
                  required: true, message: 'Please input value'
                }],
                initialValue: this.state.record.value
              })(
                <TextArea autosize={{ minRows: 2, maxRows: 30 }} />
              )}
            </FormItem>
            <FormItem {...formItemLayout} label='comment' hasFeedback>
              {getFieldDecorator('comment', {
                rules: [{
                  required: false, message: 'Please input comment'
                }],
                initialValue: this.state.record.comment
              })(
                <TextArea autosize={{ minRows: 2, maxRows: 30 }} />
              )}
            </FormItem>
          </Form>
        </Modal>
      </div>
    )
  }
}

export default Form.create()(EditConfig)
